<template>
  <div class="charts-wrap">
    <h3 class="charts-wrap-tit">{{ title }}</h3>
    <div class="charts-wrap-info" v-if="loading">
      <div class="info">
        <span class="charts-loading-text">数据加载中</span>
      </div>
    </div>
    <template v-else>
      <div class="charts-wrap-info" v-if="empty">
        <div class="info">
          <span class="charts-loading-text">暂无数据</span>
        </div>
      </div>
      <Echarts v-else :option="option" :style="{ width: '100%', height: '400px' }" ref="Echarts"></Echarts>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, watch, onMounted } from 'vue';
import { Echarts } from '@/components';

export default defineComponent({
  name: 'DashboardChart',
  props: ['title', 'loading', 'empty', 'option'],
  emits: [],
  components: { Echarts },
  setup(props, ctx) {
    const title = ref(props.title);
    const loading = ref(props.loading);
    const empty = ref(props.empty);
    let option = reactive({});
    watch(() => props.option, (val) => {
      option = val;
    }, {
      deep: true,
      immediate: true
    });
    return {
      title,
      loading,
      empty,
      option
    };
  },
});
</script>

<style lang="scss">
@import './index.scss';
</style>
